<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验1_17</title>
		<style>
			·separate {
				border-collapse: separate;
			}

			·collapse {
				border-collapse: collapse;
			}

			meter::-webkit-meter-optimum-value,
			meter::-webkit-meter-low-value,
			meter::-webkit-meter-high-value {
				background: skyblue;
			}

			body {
				width: 800px;
				border: 1px solid;
			}
		</style>
	</head>

	<body>
		<div>
			前端开发工程师|教师
		</div>
		<div>
			<ul>
				<li><a href=" ">关于我</a></li>
				<li><a href="#skills">技能</a></li>
				<li><a href="#education">教育背景</a></li>
				<li><a href="#contact">联系我</a></li>
			</ul>
		</div>
		<div>
			<h2 id="about_me">关于我</h2>
			<img src="头像.jpg" alt="头像" width="50px" height="50px">
		</div>
		<div>
			<h3>个人简介</h3>
			我是一名热爱<b>前端开发</b>的教师，拥有4年的网页开发经验。我专注于<span style="background-color: yellow;">用户友好</span>且<span
				style="background-color: yellow;">响应式</span>的网页设计。
		</div>
		<div>
			<h3>联系方式</h3>
			邮箱：<a href="youxiang">sanri@example.com</a><br>
			电话：<a href="dianhua">+86 138 0000 8000</a><br>
			地址：天津市河西区
		</div>
		<div>
			<table border="1" class="separate">
				<h2 id="skills">技能展示</h2>
				<caption>
					我的技能水平
				</caption>
				<tr>
					<td><b>技能</b></td>
					<td><b>熟练程度</b></td>
					<td><b>使用时间</b></td>
				</tr>
				<tr>
					<td>HTML</td>
					<td><meter min="0" max="1000" value="950" low="400" high="800" optimum="1000"></meter></td>
					<td>3年</td>
				</tr>
				<tr>
					<td>CSS</td>
					<td><meter min="0" max="1000" value="870" low="400" high="800" optimum="1000"></meter></td>
					<td>3年</td>
				</tr>
				<tr>
					<td>JavaScript</td>
					<td><meter min="0" max="1000" value="830" low="400" high="800" optimum="1000"></meter></meter></td>
					<td>2年</td>
				</tr>
				<tr>
					<td>响应式设计</td>
					<td><meter min="0" max="1000" value="800" low="400" high="800" optimum="1000"></meter></td>
					<td>2年</td>
				</tr>
		</div>
		<div>
			<table border="1" class="separate">
				<h2 id="education">教育背景</h2>
				<tr>
					<td><b>时间</b></td>
					<td><b>学校</b></td>
					<td><b>专业</b></td>
					<td><b>学历</b></td>
				</tr>
				<tr>
					<td>2000-2007</td>
					<td>某某大学</td>
					<td>计算机科学与技术</td>
					<td>本科</td>
				</tr>
				<tr>
					<td>1997-1999</td>
					<td>某某高级中学</td>
					<td>理科</td>
					<td>高中</td>
				</tr>
		</div>
		<div>
			<table border="1" class="separate">
				<h2>我的介绍视频</h2>
				<video src="视频.mp4" controls></video>
		</div>
		<div>
			<h3>我的工作环境音乐</h3>
			<audio src="音频.mp3" controls></audio>
		</div>
		<div>
			<h3 id="contact">联系我</h3>
			<fieldset>
				<legend>个人信息</legend>
				<label>姓名：<input type="text" name="xingming" /></label>
				<br />
				<br />
				<label>邮箱：<input type=" text" name="youxiang" /></label>
				<br />
				<br />
				<label>电话：<input type="text" name="电话" /></label>
				<br />
				<br />
			</fieldset>
		</div>
		<div>
			<fieldset>
				<legend>留言板</legend>
				<label>留言时间：<input type="date" name="shijian" /></label>
				<br />
				<br />
				<label>留言：<br /><textarea></textarea></label>
				<br />
				<br />
				<label><input type="submit" value="提交" /></label>
			</fieldset>
		</div>
		<div>
			&copy;2025赵晶的个人主页，保留所有权利.
			<br />
			关注我：<a href="Gitee">Gitee</a>
		</div>
	</body>

</html>